<template>
  <div class="dashboard-container">
    <div class="dashboard-item">
      <!-- 第一排 -->
      <el-row :gutter="20">
        <!-- 第一排左边 -->
        <el-col :span="14"><div class="grid-content bg-purple">
          <h4 class="title">机构概述</h4>
          <ul class="left-one">
            <li class="left-one-left">
              <div>{{ organName }}</div>
              <p>地址：{{ organAddress }}</p>
              <p>负责人：{{ principal }} {{ phone }}</p>
              <el-button type="warning" :plain="true" class="btn" @click.native="add">查看营业部分布</el-button>
            </li>
            <li style="border:none" class="left-one-right">
              <el-row :gutter="20">
                <el-col :span="12"><div class="bg-purple"><span>分拣中心(个)</span><div class="dataColor">{{ sortingCenterNumber }}</div></div></el-col>
                <el-col :span="12"><div class="bg-purple"><span>营业部(个)</span><div class="dataColor">{{ agencyNumber }}</div></div></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12"><div class="bg-purple"><span>司机人数(个)</span><div class="dataColor">{{ driverNumber }}</div></div></el-col>
                <el-col :span="12"><div class="bg-purple"><span>快递员人数(个)</span><div class="dataColor">{{ courierNumber }}</div></div></el-col>
              </el-row>
            </li>
          </ul>
        </div></el-col>
        <!--  第一排右边-->
        <el-col :span="10" class="right-one">
          <div class="grid-content bg-purple">
            <div class="right-one-top"><h4>今日数据</h4><div><img src="@/assets/loading.png" alt=""><span>2023-05-19 22:26</span></div></div>
            <div class="right-one-main">
              <div>
                <span><p>订单金额(元)</p></span>
                <span><h1>2,284</h1></span>
                <span><span class="right-one-main-bot">较昨日 +342</span><img src="@/assets/top.png" alt=""></span>
              </div>
              <div>
                <span><p>订单数量(笔)</p></span>
                <span><h1>193</h1></span>
                <span><span class="right-one-main-bot">较昨日 +27</span><img src="@/assets/top.png" alt=""></span>
              </div>
              <div>
                <span><p>运输任务(次)</p></span>
                <span><h1>38</h1></span>
                <span><span class="right-one-main-bot">较昨日 +26</span><img src="@/assets/top.png" alt=""></span>
              </div>
            </div>
          </div></el-col>
      </el-row>
      <!-- 第二排 -->
      <el-row :gutter="20">
        <!-- 第二排左边 -->
        <el-col :span="14" class="left-two"><div>
          <div class="grid-content bg-purple left-two-top">
            <div class="left-two-top-left">
              <h4>待办任务</h4>
              <div class="right">
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="right-end"
                >
                  <div slot="content">待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件<br>
                    待派送率=待派送/(待派送+派送中+已签收+拒收)<br>
                    未分配率=未分配/全部数据<br>
                    超时率=超时任务/(已完成+进行中+已取消）</div>
                  <img src="@/assets/tip.png" alt="">
                </el-tooltip>
              </div>
            </div>
            <div class="left-two-top-right"><img src="@/assets/loading.png" alt=""><span>2023-05-20 20:25 - 2023-05-22 23:59</span></div>

          </div>
          <div class="grid-content bg-purple left-two-main">
            <liquid-fill-chart style="width:100%" />
            <div class="left-two-main-info">
              <span><span>待取件</span><i style="color:#e15536">39</i></span>
              <span><span>待派件</span><i style="color:#ffc257">18</i></span>
              <span><span class="moveDistance">未分配运输</span><i style="color:#ff9739">4</i></span>
              <span><span class="moveDistance">超时运输</span><i style="color:#dfcb59">5</i></span>
            </div>
          </div>

        </div>
        </el-col>
        <!-- 第二排右边 -->
        <el-col :span="10" class="right-two">
          <div class="grid-content bg-purple left-two-top">
            <div class="left-two-top-left">
              <h4>执行中任务</h4>
              <div class="right">
                <el-tooltip
                  class="item"
                  effect="dark"
                  placement="right-end"
                >
                  <div slot="content">运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）<br>
                    派送率=派送中/(待派送+派送中+已签收+拒收）</div>
                  <img src="@/assets/tip.png" alt="">
                </el-tooltip>
              </div>
            </div>
            <div class="left-two-top-right"><img src="@/assets/loading.png" alt=""><span>2023-05-20 20:25 - 2023-05-22 23:59</span></div>
          </div>
          <div class="grid-content bg-purple left-two-right-main">
            <liquid-fill-chart-right style="width:100%" />
            <div class="left-two-main-info">
              <span><span>运输中</span><i style="color:#e15536">53</i></span>
              <span class="moveDistance"><span>派送中</span><i style="color:#ffc257">34</i></span>

            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 第三排 -->
      <el-row :gutter="20">
        <el-col :span="24"><div class="grid-content bg-purple left-three">
          <h4>常用功能</h4>
          <ul>
            <li><img src="@/assets/car1.png" alt=""><p>快递作业</p></li>
            <li><img src="@/assets/car2.png" alt=""><p>运输任务</p></li>
            <li><img src="@/assets/car3.png" alt=""><p>线路管理</p></li>
            <li><img src="@/assets/car4.png" alt=""><p>车辆管理</p></li>
            <li><img src="@/assets/car5.png" alt=""><p>司机管理</p></li>
            <li><img src="@/assets/car6.png" alt=""><p>运费查询</p></li>
          </ul>
        </div></el-col>
      </el-row>
      <!-- 第四排 -->
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple left-four-left">
          <h4>线路管理</h4>
          <china-map />
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple left-four-right">
          <div class="left-four-right-top">
            <h4>运输任务</h4>
            <p>查看更多<img src="@/assets/more.png" alt=""></p>
          </div>
          <seamless-scroll />
        </div></el-col>
      </el-row>
      <!-- 第五排 -->
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple left-five-left">
          <div class="left-five-left-top">
            <h4 style="margin-bottom:16px">订单总量</h4>
            <span>2022-11 - 2023-04</span>
          </div>
          <order-total />
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple left-five-right">
          <div class="left-five-right-top">
            <h4>订单分布</h4>
            <span>2022-11 - 2023-04</span>
          </div>
          <order-distribution />
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import '@/styles/dashboard.scss'
import LiquidFillChartRight from '@/components/dashboard/LiquidFillChartRight.vue'
import LiquidFillChart from '@/components/dashboard/LiquidFillChart.vue'
import SeamlessScroll from '@/components/dashboard/SeamlessScroll.vue'
import OrderDistribution from '@/components/dashboard/OrderDistribution.vue'
import OrderTotal from '@/components/dashboard/OrderTotal.vue'
import ChinaMap from '@/components/dashboard/ChinaMap.vue'

export default {
  name: 'Dashboard',
  components: { LiquidFillChart, LiquidFillChartRight, SeamlessScroll, OrderDistribution, OrderTotal, ChinaMap },

  // components: { ChinaMap },
  computed: {
    ...mapGetters([
      'name', 'organName', 'agencyNumber', 'courierNumber', 'driverNumber', 'organAddress', 'phone', 'principal', 'sortingCenterNumber'
    ])
  },

  methods: {
    add() {
      alert('haha')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size:30px;
    line-height: 46px;
  }
}
</style>
<style scoped lang="scss">

.dashboard-item{
  margin-top: 70px;
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 23px 20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
